引言 接下來,我們來介紹如何用頂點著色器和片段著色器渲染圖形,程式碼的部分,只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時,會用到兩種變數,...
引言 一直以來,我們在繪圖的時候要不管是用 2D 的 Canvas API 描繪形狀,或是用 3D 的 three.js 的幾何頂點描繪三角形片段,我們都離底層...
有時候我們會需要給一個物件邊框。無論是要讓物件在背景中突出、點選物件時有選中的感覺,或是在綠幕上有比較好裁切,物件邊框都能達到我們所需要的需求。 本篇介紹邊框,...
Shader是前端視覺特效的重要戰場,而本篇所介紹的shader,不僅只是說明怎麼辦到,還要解釋期原理,並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...
本篇內容 vertexNormal 是什麼? 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來?...
到目前為止,我們都是用three.js製作shader。 但其實three.js並不是唯一的選項,我們的選項其實很多。為了幫助大家順利應用shader在thre...
前一篇我們初步修改Shader,並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹: 實作即時變化的環境光 實作即時變化的環境光:回顧...
上一篇,我們用最快的方式,透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣,其球體範圍...